<template>
  <div class="container">
    <el-card>
      <!-- 头部 -->
      <div slot="header" class="header">
        <el-button
          class="addbtn"
          type="success"
          icon="el-icon-edit"
          @click="$router.push('/questions/new')"
          >新增试题</el-button
        >
      </div>
      <!-- 列表上面 下拉框 -->
      <el-form ref="clearListRef" class="box-select" :inline="true" :model="formList">
        <el-form-item class="select" prop="subjectID">
          <span>学科</span>
          <el-select
            v-model="formList.subjectID"
            placeholder="请选择"
            @change="handle"
          >
            <el-option
              :label="item.subjectName"
              :value="item.id"
              v-for="item in subjectList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="select" prop="catalogID">
          <span>二级目录</span>
          <el-select v-model="formList.catalogID" placeholder="请选择">
            <el-option
              :label="item.directoryName"
              :value="item.id"
              v-for="item in catalogList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="select" prop="tags">
          <span>标签</span>
          <el-select v-model="formList.tags" placeholder="请选择">
            <el-option
              :label="item.tagName"
              :value="item.id"
              v-for="item in tagsList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="select" prop="keyword">
          <span>关键字</span>
          <el-input v-model="formList.keyword"></el-input>
        </el-form-item>

        <el-form-item class="select" prop="questionType">
          <span>试题类型</span>
          <el-select v-model="formList.questionType" placeholder="试题类型">
            <el-option label="单选" value="1"></el-option>
            <el-option label="多选" value="2"></el-option>
            <el-option label="简答" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="select" prop="difficulty">
          <span>难度</span>
          <el-select v-model="formList.difficulty" placeholder="请选择">
            <el-option label="简单" value="1"></el-option>
            <el-option label="一般" value="2"></el-option>
            <el-option label="困难" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="select" prop="direction">
          <span>方向</span>
          <el-select v-model="formList.direction" placeholder="请选择">
            <el-option label="o2o" value="o2o"></el-option>
            <el-option label="外包服务" value="外包服务"></el-option>
            <el-option label="企业服务" value="企业服务"></el-option>
            <el-option label="互联网金融" value="互联网金融"></el-option>
            <el-option label="企业咨询" value="企业咨询"></el-option>
            <el-option label="互联网" value="互联网"></el-option>
            <el-option label="电子商务" value="电子商务"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="select" prop="creatorID">
          <span>录入人</span>
          <el-select v-model="formList.creatorID" placeholder="请选择">
            <el-option
              :label="item.username"
              :value="item.id"
              v-for="item in userlist"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="select" prop="remarks">
          <span>题目备注</span>
          <el-input v-model="formList.remarks"></el-input>
        </el-form-item>

        <el-form-item class="select" prop="shortName">
          <span>企业简称</span>
          <el-input v-model="formList.shortName"></el-input>
        </el-form-item>

        <el-form-item class="select" prop="province">
          <span>城市</span>
          <el-select
            v-model="formList.province"
            placeholder="请选择"
            style="width: 100px"
            @change="handleProvince"
          >
            <el-option
              :label="item"
              :value="item"
              v-for="item in citySelect.province"
              :key="item"
            ></el-option>
          </el-select>
          <el-select
            v-model="formList.city"
            placeholder="请选择"
            style="width: 100px"
          >
            <el-option
              v-for="item in citySelect.cityDate"
              :key="item"
              :label="item"
              :value="item"
              disabled
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="empty">清除</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>

      <!-- 列表 -->
      <el-tabs v-model="activeName" type="card" @tab-click='tabClick'>
        <el-tab-pane label="全部" name="first">
          <el-alert
            :title="'数据一共' + num + '条'"
            type="info"
            show-icon
            :closable="false"
          >
          </el-alert>
          <el-table :data="tableData" style="width: 100%" max-height="250">
            <el-table-column fixed prop="number" label="试题编号" width="150">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>
            <el-table-column prop="questionType" label="题型" width="120">
              <template v-slot="scope">
                <div>
                  {{
                    scope.row.questionType >= 2
                      ? scope.row.questionType === 2
                        ? "多选"
                        : "简答"
                      : "单选"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="question" label="题干" width="300">
              <template v-slot="scope">
                <div v-html="scope.row.question"></div>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="120">
              <template v-slot="scope">
                <div>
                  {{ scope.row.addDate | parseTimeByString("{y}-{m}-{d}") }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="difficulty" label="难度" width="120">
              <template v-slot="scope">
                <div>
                  {{
                    scope.row.difficulty >= 2
                      ? scope.row.difficulty === 2
                        ? "一般"
                        : "困难"
                      : "简单"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>
            <el-table-column prop="chkState" label="审核状态" width="120">
              <template v-slot="scope">
                <div>
                  {{
                    scope.row.chkState >= 1
                      ? scope.row.chkState === 1
                        ? "已审核"
                        : "已拒绝"
                      : "待审核"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>
            <el-table-column prop="publishState" label="发布状态" width="120">
              <template v-slot="scope">
                <div>
                  {{ scope.row.publishState === 0&&scope.row.chkState===1 ? "已下架" : (scope.row.publishState===0&&scope.row.chkState!==1?'待发布':'已发布') }}
                </div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="preview(scope.row)"
                  >预览</el-button
                >
                <el-button
                  type="text"
                  :disabled="scope.row.chkState > 0"
                  size="mini"
                  @click="audit(scope.row)"
                  >审核</el-button
                >
                <el-button type="text" size="mini" @click="change(scope.row)" :disabled="scope.row.publishState ===1"
                  >修改</el-button
                >
                <el-button type="text" size="mini" @click="onPublish(scope.row)">{{scope.row.publishState ===1?'下架':'上架'}}</el-button>
                <el-button type="text" size="mini" :disabled="scope.row.publishState ===1" @click="onDeleteBtn(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table></el-tab-pane
        >
        <!-- 待审核 -->
        <el-tab-pane label="待审核" name="second">
           <el-alert
            :title="'数据一共' + num + '条'"
            type="info"
            show-icon
            :closable="false"
          >
          </el-alert>
          <el-table :data="tableData" style="width: 100%" max-height="250">
            <el-table-column fixed prop="number" label="试题编号" width="150">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>
            <el-table-column prop="questionType" label="题型" width="120">
              <template v-slot="scope">
                <div>
                  {{
                    scope.row.questionType >= 2
                      ? scope.row.questionType === 2
                        ? "多选"
                        : "简答"
                      : "单选"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="question" label="题干" width="300">
              <template v-slot="scope">
                <div v-html="scope.row.question"></div>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="120">
              <template v-slot="scope">
                <div>
                  {{ scope.row.addDate | parseTimeByString("{y}-{m}-{d}") }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="difficulty" label="难度" width="120">
              <template v-slot="scope">
                <div>
                  {{
                    scope.row.difficulty >= 2
                      ? scope.row.difficulty === 2
                        ? "一般"
                        : "困难"
                      : "简单"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>
            <el-table-column prop="chkState" label="审核状态" width="120">
              <template v-slot="scope">
                <div>
                  {{
                    scope.row.chkState >= 1
                      ? scope.row.chkState === 1
                        ? "已审核"
                        : "已拒绝"
                      : "待审核"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>
            <el-table-column prop="publishState" label="发布状态" width="120">
              <template v-slot="scope">
                <div>
                  {{ scope.row.publishState === 0&&scope.row.chkState===1 ? "已下架" : (scope.row.publishState===0&&scope.row.chkState!==1?'待发布':'已发布') }}
                </div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="preview(scope.row)"
                  >预览</el-button
                >
                <el-button
                  type="text"
                  :disabled="scope.row.chkState > 0"
                  size="mini"
                  @click="audit(scope.row)"
                  >审核</el-button
                >
                <el-button type="text" size="mini" @click="change(scope.row)" :disabled="scope.row.publishState ===1"
                  >修改</el-button
                >
                <el-button type="text" size="mini" @click="onPublish(scope.row)">{{scope.row.publishState ===1?'下架':'上架'}}</el-button>
                <el-button type="text" size="mini" :disabled="scope.row.publishState ===1" @click="onDeleteBtn(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
           </el-tab-pane>
           <!-- 已审核 -->
        <el-tab-pane label="已审核" name="third">
          <el-alert
            :title="'数据一共' + num + '条'"
            type="info"
            show-icon
            :closable="false"
          >
          </el-alert>
          <el-table :data="tableData" style="width: 100%" max-height="250">
            <el-table-column fixed prop="number" label="试题编号" width="150">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>
            <el-table-column prop="questionType" label="题型" width="120">
              <template v-slot="scope">
                <div>
                  {{
                    scope.row.questionType >= 2
                      ? scope.row.questionType === 2
                        ? "多选"
                        : "简答"
                      : "单选"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="question" label="题干" width="300">
              <template v-slot="scope">
                <div v-html="scope.row.question"></div>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="120">
              <template v-slot="scope">
                <div>
                  {{ scope.row.addDate | parseTimeByString("{y}-{m}-{d}") }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="difficulty" label="难度" width="120">
              <template v-slot="scope">
                <div>
                  {{
                    scope.row.difficulty >= 2
                      ? scope.row.difficulty === 2
                        ? "一般"
                        : "困难"
                      : "简单"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>
            <el-table-column prop="chkState" label="审核状态" width="120">
              <template v-slot="scope">
                <div>
                  {{
                    scope.row.chkState >= 1
                      ? scope.row.chkState === 1
                        ? "已审核"
                        : "已拒绝"
                      : "待审核"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>
            <el-table-column prop="publishState" label="发布状态" width="120">
              <template v-slot="scope">
                <div>
                  {{ scope.row.publishState === 0&&scope.row.chkState===1 ? "已下架" : (scope.row.publishState===0&&scope.row.chkState!==1?'待发布':'已发布') }}
                </div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="preview(scope.row)"
                  >预览</el-button
                >
                <el-button
                  type="text"
                  :disabled="scope.row.chkState > 0"
                  size="mini"
                  @click="audit(scope.row)"
                  >审核</el-button
                >
                <el-button type="text" size="mini" @click="change(scope.row)" :disabled="scope.row.publishState ===1"
                  >修改</el-button
                >
                <el-button type="text" size="mini" @click="onPublish(scope.row)">{{scope.row.publishState ===1?'下架':'上架'}}</el-button>
                <el-button type="text" size="mini" :disabled="scope.row.publishState ===1" @click="onDeleteBtn(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 已拒绝 -->
        <el-tab-pane label="已拒绝" name="fourth">
          <el-alert
            :title="'数据一共' + num + '条'"
            type="info"
            show-icon
            :closable="false"
          >
          </el-alert>
          <el-table :data="tableData" style="width: 100%" max-height="250">
            <el-table-column fixed prop="number" label="试题编号" width="150">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>
            <el-table-column prop="questionType" label="题型" width="120">
              <template v-slot="scope">
                <div>
                  {{
                    scope.row.questionType >= 2
                      ? scope.row.questionType === 2
                        ? "多选"
                        : "简答"
                      : "单选"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="question" label="题干" width="300">
              <template v-slot="scope">
                <div v-html="scope.row.question"></div>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="120">
              <template v-slot="scope">
                <div>
                  {{ scope.row.addDate | parseTimeByString("{y}-{m}-{d}") }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="difficulty" label="难度" width="120">
              <template v-slot="scope">
                <div>
                  {{
                    scope.row.difficulty >= 2
                      ? scope.row.difficulty === 2
                        ? "一般"
                        : "困难"
                      : "简单"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>
            <el-table-column prop="chkState" label="审核状态" width="120">
              <template v-slot="scope">
                <div>
                  {{
                    scope.row.chkState >= 1
                      ? scope.row.chkState === 1
                        ? "已审核"
                        : "已拒绝"
                      : "待审核"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>
            <el-table-column prop="publishState" label="发布状态" width="120">
              <template v-slot="scope">
                <div>
                  {{ scope.row.publishState === 0&&scope.row.chkState===1 ? "已下架" : (scope.row.publishState===0&&scope.row.chkState!==1?'待发布':'已发布') }}
                </div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="preview(scope.row)"
                  >预览</el-button
                >
                <el-button
                  type="text"
                  :disabled="scope.row.chkState > 0"
                  size="mini"
                  @click="audit(scope.row)"
                  >审核</el-button
                >
                <el-button type="text" size="mini" @click="change(scope.row)" :disabled="scope.row.publishState ===1"
                  >修改</el-button
                >
                <el-button type="text" size="mini" @click="onPublish(scope.row)">{{scope.row.publishState ===1?'下架':'上架'}}</el-button>
                <el-button type="text" size="mini" :disabled="scope.row.publishState ===1" @click="onDeleteBtn(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[1, 2, 3, 4]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="num"
      >
      </el-pagination>
 </el-card>
      <!--预览 弹出层 -->
      <el-dialog title="题目预览" :visible.sync="showPreviewDialog" width="60%">
        <el-row :gutter="20">
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【题型】：{{
                previewList.questionType >= 2
                  ? previewList.questionType === 2
                    ? "多选"
                    : "简答"
                  : "单选"
              }}
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【编号】：{{ previewList.id }}
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【难度】：{{
                previewList.difficulty >= 2
                  ? previewList.difficulty === 2
                    ? "一般"
                    : "困难"
                  : "简单"
              }}
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【标签】：{{ previewList.tags }}
            </div></el-col
          >
        </el-row>
        <el-row
          :gutter="20"
          style="
            margin-top: 30px;
            margin-bottom: 20px;
            padding-bottom: 30px;
            border-bottom: 2px solid #cccccc;
          "
        >
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【学科】：{{ previewList.subject }}
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【目录】：{{ previewList.catalog }}
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【方向】：{{ previewList.direction }}
            </div></el-col
          >
        </el-row>
        <p>【题干】：</p>
        <p
          v-html="previewList.question"
          style="
            color: blue;
            padding-bottom: 10px;
            border-bottom: 2px solid #cccccc;
          "
        ></p>
        <p style="padding-bottom: 10px; border-bottom: 2px solid #cccccc">
          【参考答案】：
          <el-button type="danger" size="small" @click="showVideo = !showVideo"
            >视频答案预览</el-button
          >
          <video
            v-if="showVideo"
            width="320"
            height="240"
            controls
            style="display: block"
          >
            <source :src="previewList.videoURL" type="video/mp4" />
            <source :src="previewList.videoURL" type="video/ogg" />
            <source :src="previewList.videoURL" type="video/webm" />
          </video>
        </p>
        <p style="padding-bottom: 10px; border-bottom: 2px solid #cccccc">
          【答案解析】：<span
            v-html="previewList.answer === null ? '无' : previewList.answer"
          ></span>
        </p>
        <p>
          【题目备注】：{{
            previewList.remarks === null ? "无" : previewList.remarks
          }}
        </p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showPreviewDialog = false">取 消</el-button>
        </span>
      </el-dialog>

      <!-- 审核弹出层 -->
      <el-dialog title="题目审核" :visible.sync="auditDialog" width="30%" @close="auditDialogClose">
        <el-form :model="auditForm" :rules="rules" ref="auditRef">
          <el-form-item>
            <el-radio-group v-model="auditData.chkState">
              <el-radio :label="1">通过</el-radio>
              <el-radio :label="2">拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="chkRemarks">
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入审核意见"
              v-model="auditForm.chkRemarks"
              style="margin-top: 30px"
              resize="none"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button @click="auditDialog = false">取 消</el-button>
          <el-button type="primary" @click="onConfirm">确 定</el-button>
        </span>
      </el-dialog>

  </div>
</template>

<script>
import { choice, choiceCheck, choicePublish, remove } from '@/api/hmmm/questions.js'
import { list } from '@/api/hmmm/subjects.js'
import { list as clList } from '@/api/hmmm/directorys.js'
import { list as usersList } from '@/api/base/users.js'
import { list as tagList } from '@/api/hmmm/tags.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  data () {
    return {
      // 下拉菜单
      formList: {
        subjectID: undefined,
        catalogID: undefined,
        tags: undefined,
        keyword: '',
        questionType: undefined,
        difficulty: undefined,
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: '',
        province: '',
        city: ''
      },
      activeName: 'first',
      // 列表数据
      tableData: [],
      // 数据数量
      num: 0,
      // 分页数据
      params: {
        page: 1,
        pagesize: 1,
        chkState: null
      },
      // 学科列表数据
      subjectList: [],
      // 目录列表数据
      catalogList: [],
      // 标签列表数据
      tagsList: [],
      // 录入人列表
      userlist: [],
      // 城市
      citySelect: {
        province: [],
        cityDate: []
      },
      // 控制预览弹出层显示
      showPreviewDialog: false,
      previewList: {},
      showVideo: false,
      // 控制审核弹出层
      auditDialog: false,
      auditData: {
        id: null,
        chkState: null,
        chkRemarks: ''
      },
      auditForm: {
        chkRemarks: ''
      },
      // 审核弹出层 验证规则
      rules: {
        chkRemarks: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      },
      // 上下架
      publishData: {
        id: null,
        publishState: null
      },
      // 删除项的id
      deleteId: {
        id: null
      }
    }
  },
  created () {
    this.getTabList()
    this.getSubjectList()
    this.getCityData()
    this.getUserList()
  },
  methods: {
    // 获取全部列表数据
    async getTabList () {
      const { data } = await choice(this.params)
      // console.log(data)
      this.num = data.counts
      this.tableData = data.items
    },
    // 点击tabs栏切换
    tabClick (tab) {
      if (tab.name === 'first') {
        this.params.chkState = null
        this.getTabList()
      } else if (tab.name === 'second') {
        this.params.chkState = 0
        this.getTabList()
      } else if (tab.name === 'third') {
        this.params.chkState = 1
        this.getTabList()
      } else if (tab.name === 'fourth') {
        this.params.chkState = 2
        this.getTabList()
      }
    },
    // 获取所有学科列表
    async getSubjectList () {
      const { data } = await list()
      // console.log(data)
      this.subjectList = data.items
    },
    // 获取所有目录
    async getCatalogList (a) {
      const { data } = await clList(a)
      // console.log(data)
      this.catalogList = data.items
    },
    // 获取所有标签列表`
    async getTagsList (b) {
      const { data } = await tagList(b)
      // console.log(data)
      this.tagsList = data.items
    },
    // 选择学科,自动初始化二级目录,和标签的下拉菜单
    handle () {
      this.getCatalogList({
        subjectID: this.formList.subjectID
      })
      this.getTagsList({
        subjectID: this.formList.subjectID
      })
    },
    // 获取录入人列表数据
    async getUserList () {
      const { data } = await usersList()
      // console.log(data)
      this.userlist = data.list
    },
    // 获取城市
    getCityData () {
      this.citySelect.province = provinces()
    },
    // 选城市获取到区
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      this.formList.city = this.citySelect.cityDate[0]
    },
    // 清空按钮
    empty () {
      // this.formList = {}
      this.$refs.clearListRef.resetFields()
      this.catalogList = []
      this.tagsList = []
    },
    // 搜索按钮
    search () {
      // this.getTabList(this.formList)
      console.log(this.formList)
    },
    // 分页
    handleSizeChange (val) {
      this.params.pagesize = val
      this.getTabList()
    },
    handleCurrentChange (val) {
      this.params.page = val
      this.getTabList()
    },
    // 预览
    preview (data) {
      this.showPreviewDialog = true
      // console.log(data)
      this.previewList = data
    },
    // 审核 按钮
    audit (data) {
      this.auditDialog = true
      // console.log(data)
      this.auditData.id = data.id
    },
    // 点击审核弹出层确定按钮
    onConfirm () {
      this.auditData.chkRemarks = this.auditForm.chkRemarks
      // console.log(this.auditData)
      this.$refs.auditRef.validate(async (value) => {
        if (value) {
          await choiceCheck(this.auditData)
          this.getTabList()
          this.auditDialog = false
        } else {
          this.$message({
            message: '请输入审核意见',
            type: 'warning'
          })
        }
      })
    },
    // 审核弹出层关闭按钮
    auditDialogClose () {
      this.$refs.auditRef.resetFields()
    },
    // 点击修改按钮
    change (data) {
      // console.log(data.id)27
      this.$router.push('/questions/new?id=' + data.id)
    },

    // 点击上下架按钮
    onPublish (data) {
      const publish = data.publishState === 1 ? '下架' : '上架'
      this.$confirm('你确定' + publish + '这道题目?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.publishData.id = data.id
        this.publishData.publishState = data.publishState === 1 ? data.publishState = 0 : data.publishState = 1
        // console.log(this.publishData)
        await choicePublish(this.publishData)
        this.getTabList()
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },

    // 点击删除按钮
    onDeleteBtn (data) {
      // console.log(data.id)
      this.deleteId.id = data.id
      this.$confirm('此操作将永久删除该题目，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(this.deleteId)
        this.getTabList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  .addbtn {
    float: right;
    font-size: 12px;
  }
  min-width: 1338px;
  /deep/.el-card__header {
    border: 0 !important;
  }
}
.box-select {
  display: flex;
  flex-wrap: wrap;
  min-width: 1388px;
  /deep/.el-form-item__content {
    display: flex;
    width: 300px;
    height: 40px;
    align-items: center;
    justify-content: flex-end;
  }
  .select {
    align-items: center;
    margin: 15px;
    span {
      // width: 100px !important;
      // text-align: center;
      font-size: 14px;
      font-weight: 700;
    }
  }
  /deep/span {
    width: 100px;
    text-align: center;
  }
}
</style>
